<template>
  <div>
    <div v-for="(x,y,index) in MongoList">
      <br>
      {{y}}
      <p v-if="y==='辞职日期'|| y==='请假日期'"><a-date-picker @change="onChange" /></p>
      <p v-if="y==='结束日期'"><a-date-picker @change="onChange1" /></p>
<!--      请假人和请假原因-->
      <a-input type="j" v-if="x=='txt'" v-model="namelist[y]"></a-input>

<!--      <select v-if="x=='select'" v-model="namelist[y]">-->
<!--        <option :value="f.username" v-for="f in UserList" v-if="uid!=f.id">{{f.username}}</option>-->
<!--      </select>-->

      <!--      审核人-->





<!--      <a-select v-if="x=='select'" v-model="checklist"-->
<!--        mode="multiple"-->
<!--        :default-value="['1', '2']"-->
<!--        style="width: 80%"-->
<!--        placeholder="请选择"-->
<!--      >-->
<!--        <a-select-option :value="f.id" :key="f.id" v-for="f in UserList" v-if="uid!=f.id">-->
<!--          {{f.username}}-->
<!--        </a-select-option>-->
<!--      </a-select>-->

      <!--      上传图片-->
<!--      <p style="text-align: center;">七牛云上传：<input type="file" @change="upload_qiniu" v-if="x=='file'" v-model="namelist[y]"></p>-->
<!--      <a-input type="file" v-if="x=='file'" v-model="namelist[y]" id="uploadFileInput" @change="upload_qiniu"></a-input>-->


<!--      <a-upload v-if="x=='file'" v-model="namelist[y]" id="uploadFileInput" @change="uploadInputchange"-->
<!--        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--        :transform-file="transformFile"-->
<!--      >-->
<!--        <a-button> <a-icon type="file" /> 上传图片 </a-button>-->
<!--      </a-upload>-->
    </div>

    <p>选择审批人：
      <a-checkbox v-for="(i,index) in UserList" :key="i.id"  v-if="uid!=i.id" :disabled="i.yxz" v-model="i.value" @change="onChangess(i.id, index, i.value)">{{i.username}}</a-checkbox>
    </p>
    <p>{{now_xz}}</p>
    <p>{{checklist1}}</p>
    <a-button type="primary" @click="Inparallel">并审</a-button>
    <a-button type="primary" @click="Inseries">串审</a-button>


    <p style="text-align: center;"><input type="file" @change="upload_qiniu"></p>
    <p v-if="img_url" style="text-align: center;"><img :src="img_url" alt="" style="width: 200px; height: 200px; border-radius:50%;"></p>

    <br><br>
<!--    添加工单按钮-->
    <a-button type="dashed" @click="AddWork">添加工单</a-button>
  </div>
</template>

<script>
export default {
  name: "Leave",
  data() {
    return {
      // 用户id
      id: this.$route.query.id,
      // MongoDB列表
      MongoList:[],
      // 用户列表
      UserList:[],
      namelist:{},
      uid:localStorage.getItem('uid'),
      checklist:[],
      uptoken:'',
      imgLoadPercent:'',
      img_url:'',
      checklist1:[],
      now_xz:[],
    }
  },
  methods:{
    onChange(date, dateString) {
      console.log(date, dateString);
      for(var i in this.MongoList) {
        if (i === '辞职日期' || i === '请假日期') {
          this.namelist[i] = dateString
        }
      }
    },
    onChange1(date, dateString) {
      console.log(date, dateString);
      for(var i in this.MongoList) {
        if (i==='结束日期') {
          this.namelist[i] = dateString
        }
      }
    },
    onChangess(e, index, value) {
      if(this.now_xz.indexOf(e)==-1){
        this.now_xz.push(e)
      }else {
        this.now_xz.splice(this.now_xz.indexOf(e), 1)
      }
      this.UserList.yxz = false
    },
    Inparallel(){
      for(var i of this.checklist){
        if(this.now_xz.indexOf(i.id)!=-1){
          i.yxz = true
        }
      }
      this.checklist1.push(this.now_xz)
      this.now_xz=[]
    },
    Inseries(){
      for(var i of this.now_xz){
        this.checklist1.push(i)
      }
      this.now_xz = []
      for(var j of this.UserList){
        if(this.checklist1.indexOf(j.id)!=-1){
          j.yxz = true
        }
      }
    },



    // 获取MongoDB中的数据
    getMongo(){
      this.$axios.get('/z/getmongo/?id='+this.id)
      .then(res=>{
        console.log(res.data)
        this.MongoList=res.data
      })
    },
    // 获取用户名
    getSelect(){
      this.$axios.get('/z/user/')
      .then(res=>{
        console.log(res.data)
        this.UserList=res.data.data
        for (var j of this.UserList) {
          j['yxs'] = false
          j['value'] = false
        }
        for (var i in this.mb) {
          this.mb[i] = ''
        }
      })
    },
    AddWork(){
      this.$axios.post('/z/storage/',{
        'id':this.id,
        'name':this.namelist,
        'checklist':this.checklist1,
        'user_id':this.uid,
        'qnimg':this.img_url
      })
      .then(res=>{
        alert(res.data.msg)
        console.log()
      })
    },
    // 获取uptoken
    get_uptoken() {
      this.$axios.get('/z/uptoken/').then(res=>{
        this.uptoken = res.data.token
      })
    },
    // 七牛云上传
    upload_qiniu(e) {
      // 获取文件对象
      let file = e.target.files[0]
      // 声明参数
      let form_data = new FormData()
      // 将上传凭证添加参数
      form_data.append('token', this.uptoken)
      // 添加图片
      form_data.append('file', file)
      // 定制化axios  不携带cookie上传
      const axios_qiniu = this.$axios.create({withCredentials:false})
      // 发送请求
      axios_qiniu({
        method: 'post',
        url: 'http://up-z1.qiniu.com/',
        data: form_data,
        tiemout: 30000,

      }).then(res=>{
        console.log(res)
        this.img_url = 'http://qq5y8xj19.hb-bkt.clouddn.com/' + res.data.key
      })
    },

    //触发input change事件
    // uploadInputchange(){
    //   let file = document.getElementById("uploadFileInput").files[0];   //选择的图片文件
    //   // console.log(document.getElementById("uploadFileInput"))
    //   this.get_token();
    //   this.uploadImgToQiniu(file);
    // },
  },
  mounted() {
    this.getMongo();
    this.getSelect();
    this.get_uptoken();
  }
}
</script>

<style scoped>

</style>
